<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import * as admin from '@/api/admin.js'
import { ElMessageBox, ElMessage } from 'element-plus'

const route = useRoute()
const orderData = ref(null)
const loading = ref(false)
const inputId = ref('')

// 获取订单数据
const fetchOrderData = async (id) => {
  try {
    loading.value = true
    const param = {
      currentPage: 1,
      uuid: id
    }
    const res = await admin.finyuyueService(param)
    if (res.code === 0) {
        console.log(res.data)
        orderData.value = res.data[0]
    } else {
      ElMessage.error(res.message || '获取订单信息失败')
    }
  } catch (error) {
    ElMessage.error('请求出错，请稍后重试')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 验票操作
const validateTicket = async () => {
  if (!orderData.value) return
  
  try {
    await ElMessageBox.confirm('确定要验证此订单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    loading.value = true
    const res = await admin.updateyuyueService({
      id: orderData.value.id,
      status: '已完成' // 根据实际API调整
    })
    
    if (res.code === 0) {
      ElMessage.success('验票成功')
      orderData.value.status = '已完成' // 更新本地状态
    } else {
      ElMessage.error(res.message || '验票失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作出错，请稍后重试')
      console.error(error)
    }
  } finally {
    loading.value = false
  }
}

// 初始化检查URL参数
onMounted(() => {
  const yuyueid = route.query.yuyueid
  if (yuyueid) {
    inputId.value = yuyueid
    fetchOrderData(yuyueid)
  }
})

// 手动检索
const handleSearch = () => {
  if (!inputId.value) {
    ElMessage.warning('请输入预约ID')
    return
  }
  fetchOrderData(inputId.value)
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span class="title">验票</span>
      </div>
    </template>
    
    <div class="content">
      <div class="search-box">
        <el-input 
          v-model="inputId" 
          placeholder="请输入预约订单号" 
          clearable 
          @keyup.enter="handleSearch"
          class="large-input"
        >
          <template #append>
            <el-button 
              type="primary" 
              :icon="Search" 
              @click="handleSearch"
              :loading="loading"
              class="search-btn"
            />
          </template>
        </el-input>
      </div>

      <div v-if="orderData" class="order-info">
        <el-card shadow="hover" class="info-card">
            <template #header>
            <div class="card-header">
                <span>订单详情</span>
            </div>
            </template>

            <div class="info-grid">
            <div class="info-row">
                <span class="info-label">订单ID:</span>
                <span class="info-value">{{ orderData.uuid }}</span>
            </div>

            <!-- 判断是景区预约还是酒店预约 -->
            <div class="info-row">
                <span class="info-label">预约项目:</span>
                <span class="info-value">
                <template v-if="orderData.jinquId">
                    {{ orderData.jinquName || '-' }}
                </template>
                <template v-else-if="orderData.jiudianId">
                    {{ orderData.jiudianName || '-' }}
                </template>
                <template v-else>
                    {{ orderData.projectName || '-' }}
                </template>
                </span>
            </div>

            <!-- 酒店预约专属字段 -->
            <div class="info-row" v-if="orderData.jiudianId">
                <span class="info-label">离开日期:</span>
                <span class="info-value">{{ orderData.endTime || '-' }}</span>
            </div>

            <div class="info-row" v-if="orderData.jiudianId">
                <span class="info-label">预约房间:</span>
                <span class="info-value">{{ orderData.room || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">创建时间:</span>
                <span class="info-value">{{ orderData.createTime || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">预约时间:</span>
                <span class="info-value">{{ orderData.yyTime || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">客户用户:</span>
                <span class="info-value">{{ orderData.userName || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="info-label">预约状态:</span>
                <span class="info-value" :class="{'success': orderData.status === '已预约', 'warning': orderData.status === '已完成'}">
                {{ orderData.status }}
                </span>
            </div>
            </div>

            <div class="action-container" v-if="orderData.status === '已预约'">
            <el-button 
                type="success" 
                size="large"
                :loading="loading"
                @click="validateTicket"
                class="validate-btn"
            >
                验票
            </el-button>
            </div>
        </el-card>
        </div>

      
      <div v-else-if="!loading" class="no-data">
        <el-empty description="暂无订单数据" />
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.page-container {
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f7fa;
  padding-bottom: 60px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.content {
  padding: 40px 20px;
  max-width: 960px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.search-box {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 40px;
}

.large-input {
  font-size: 18px;
}

.large-input :deep(.el-input__inner) {
  height: 56px;
  font-size: 18px;
  border-radius: 8px 0 0 8px;
}

.search-btn {
  height: 56px;
  width: 100px;
  font-size: 18px;
  border-radius: 0 8px 8px 0;
  transition: all 0.2s;
}

.search-btn:hover {
  transform: scale(1.03);
}

.info-card {
  margin-top: 20px;
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(to right, #fefefe, #f9fbfc);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  margin-top: 20px;
}

.info-row {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.info-label {
  font-weight: 600;
  width: 100px;
  color: #606266;
  margin-right: 10px;
  font-size: 16px;
}

.info-value {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.success {
  color: #67C23A;
  font-weight: 600;
}

.warning {
  color: #E6A23C;
  font-weight: 600;
}

.action-container {
  margin-top: 40px;
  text-align: center;
  grid-column: 1 / -1;
}

.validate-btn {
  width: 220px;
  height: 48px;
  font-size: 18px;
  border-radius: 8px;
  transition: all 0.2s;
}

.validate-btn:hover {
  transform: scale(1.04);
}

.no-data {
  margin-top: 60px;
}
</style>